<template>
    <div class="table-container">
        <div class="table-breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>员工管理</el-breadcrumb-item>
            <el-breadcrumb-item>客户离职继承</el-breadcrumb-item>
        </el-breadcrumb>
        </div>
        <!-- <div class="table-search">
            <el-row>
                <div class="item">分配状态
                    <el-select v-model="valueStatus" placeholder="请选择">
                        <el-option
                        v-for="item in statusList"
                        :key="item.value"
                        clearable
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="item" style="margin-top:10px;">离职时间
                    <el-date-picker
                    v-model="valueTime"
                    type="daterange"
                    clearable
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                </div>
            </el-row>
            <el-row>
                <el-input
                style="width: 200px;margin-right: 10px"
                placeholder="请输入员工信息查询"
                v-model="keyword"
                clearable
                @clear="resetData"
                >
                </el-input>
                <el-button type="primary" @click="resetData">搜索</el-button>
            </el-row>
        </div> -->
        <div class="table-content">
            <span>提示：继承修改将于24小时后生效！</span>
            <el-table
                border
                empty-text="当前数据空空如也"
                ref="multipleTable"
                :data="offerList"
                tooltip-effect="dark"
                style="width: 100%"
                @select="selectedRow"
                @select-all="selectedAll"
            >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="id" label="ID" width="100"></el-table-column>
                <el-table-column prop="follow_data.userid" label="离职员工" width="auto"></el-table-column>
                <!-- <el-table-column prop="id" label="分配状态" width="auto"></el-table-column> -->
                <!-- <el-table-column prop="name" label="所属部门" width="auto"></el-table-column> -->
                <el-table-column prop="name" label="待分配客户" width="auto"></el-table-column>
                <!-- <el-table-column prop="mobile" label="待分配客户群" width="auto"></el-table-column> -->
                <el-table-column prop="delete_time" label="离职时间" width="auto"></el-table-column>
                <el-table-column label="操作" fixed="right">
                    <template slot-scope="scope">
                        <el-button slot="reference" @click="toSelectStaff(scope.$index, scope.row)" type="primary" size="mini">分配</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page-nav">
                <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[10, 20, 30, 50,100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </div>
        <!-- 选择接替员工 -->
        <el-dialog
            title="选择接替的员工"
            :visible.sync="dialogVisible_staff"
            @closed="closedFn_staff"
            width="30%">
            <div class="selectStaffBox">
                <!-- <el-input type="text" v-model="staffInput" @keyup.enter.native="getSelectStaff" :placeholder="placeText"></el-input> -->
                <div class="selectList" v-if="selectStaffData.length">
                    <el-radio-group v-model="radioStaff">
                        <el-radio :label="item.qy_wechat_id" v-for="(item,index) in selectStaffData" :key="index">{{item.name}}</el-radio>
                    </el-radio-group>
                </div>
                <div v-else>暂无数据~</div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible_staff = false">取 消</el-button>
                <el-button type="primary" @click="selectStaffOk">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data(){
        return{
            multipleSelection: [],
            keyword:'',
            page:1,
            pageSize:10,
            total:0,
            statusList:[{
                label:'待分配',
                value:'待分配'
            },{
                label:'已分配',
                value:'已分配'
            }], //状态列表
            valueStatus:'', //选择的分配状态
            valueTime:[],//选择的时间
            offerList:[],

            oldStaffId:'',
            customerId:'',

            dialogVisible_staff:false,//选择接替员工对话框
            selectStaffData:[],
            radioStaff:'',
            
        }
    },
    mounted() {
        this.getQuitList()
    },
    methods: {
        // 获取离职继承列表
        getQuitList(){
            let params = {
                page:this.page,
                pagesize:this.pageSize
            }
            this.$http.post('/api/root/qywx/getUnassignedList',params).then(res=>{
                console.log(res,'离职继承列表');
                if(res.code==1){
                    this.offerList = res.data.list?res.data.list:[];
                    this.total = res.data.count
                }
            })
        },

        // 分配按钮
        toSelectStaff(index,row){
            console.log(index,row,'需要分配的员工');
            this.oldStaffId = row.staff_qy_user_id
            this.customerId = row.external_userid
            this.dialogVisible_staff = true
            this.getSelectStaff()
        },
        // 获取接替员工列表
        getSelectStaff(){
            let params = {
                is_qy:1
            }
            this.$http.post('/api/root/qywx/getQyUserList',params).then(res=>{
                console.log(res,'接替员工');
                if(res.code==1){
                    this.selectStaffData = res.data.data?res.data.data:[]
                }
            })
        },
        // 选择接替员工后确定
        selectStaffOk(){
            if(!this.radioStaff){
                this.$message.warning('请选择接替员工')
                return
            }
            this.$confirm('确定分配该客户吗？','提示',{
                distinguishCancelAndClose: true,
			    confirmButtonText: '确定',
			    cancelButtonText: '取消'
            }).then(()=>{
                let arr = []
                arr.push(this.customerId)
                let params = {
                    handover_userid:this.oldStaffId,
                    takeover_userid:this.radioStaff,
                    external_userid:arr
                }
                this.$http.post('/api/root/qywx/resignedTransferCustomer',params).then(res=>{
                    console.log(res,'分配结果');
                    if(res.code==1){
                        this.$message.success('分配成功')
                        this.dialogVisible_staff = false
                        this.getQuitList()
                    }else{
                        this.$message.warning(res.msg)
                    }
                })
            }).catch(()=>{})
        },
        // 关闭对话框
        closedFn_staff(){
            this.radioStaff = ''
            this.oldStaffId = ''
            this.customerId = ''
        },

        handleSizeChange(val) {
            this.pageSize = val;
            this.page = 1;
            this.getQuitList()
        },
        handleCurrentChange(val) {
            this.page = val;
            this.getQuitList()
        },
        // 选择
        selectedRow(selection, row) {
            this.multipleSelection = [];
            const _ths = this;
            selection.map(function (item) {
                _ths.multipleSelection.push(item.id);
            })
        },
        selectedAll(rows) {
            if (rows.length === 0) {
                this.multipleSelection = [];
            } else {
                const _ths = this;
                rows.map(function (item) {
                    if (!_ths.multipleSelection.includes(item.id)) {
                    _ths.multipleSelection.push(item.id);
                    }
                })
            }
        },

        // 分配按钮
        // toDetail(index,row){
        //     this.$router.push({name:'quitDetail',query:{userids:row.handover_userid}})
        // },

        // 搜索按钮
        resetData(){

        }
    },
}
</script>

<style lang="less" scoped>
@import 'index.less';
</style>


